<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-alert
                    title="注意：只允许为第三级分类设置相关参数"
                    type="warning" show-icon>
            </el-alert>
            <div class="cate_table_header">
                <span>请选择商品分类： </span>
                <el-cascader :props="{children: 'children',label: 'cat_name',value: 'cat_id'}"
                    v-model="cate_value"
                    :options="cate_options"
                    @change="handleChange">
                </el-cascader>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="动态参数" name="only">
                    <div style="display: flex">
                        <el-button type="primary" :disabled="isBtnDisabled" @click="param_dialogVisible=true">添加参数</el-button>
                    </div>
                    <el-table stripe border
                            :data="onlyTableData"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                   <el-tag v-for="tag in scope.row.attr_vals" :key="tag"
                                           closable effect="plain" style="margin-right: 10px;">
                                       {{tag}}
                                   </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" width="50">
                        </el-table-column>
                        <el-table-column prop="attr_name" label="参数名称" width="350">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditMessage(scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="showDeleteMessage(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="many">
                    <div style="display: flex">
                        <el-button type="primary" :disabled="isBtnDisabled" @click="param_dialogVisible=true">添加属性</el-button>
                    </div>
                    <el-table stripe border
                            :data="manyTableData"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-tag v-for="tag in scope.row.attr_vals" :key="tag"
                                        closable effect="plain" style="margin-right: 10px;">
                                    {{tag}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" width="50">
                        </el-table-column>
                        <el-table-column prop="attr_name" label="参数名称" width="350">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditMessage(scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="showDeleteMessage(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <el-dialog
                :title="'添加'+getTitle"
                :visible.sync="param_dialogVisible"
                width="30%">
            <el-form :model="paramRuleForm" :rules="paramRuleFormRules" ref="paramRuleFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="参数名称" prop="params_name">
                    <el-input v-model="paramRuleForm.params_name"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="param_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addParams">确 定</el-button>
        </el-dialog>
        <el-dialog
                :title="'修改'+getTitle"
                :visible.sync="set_param_dialogVisible"
                width="30%">
            <el-form :model="paramRuleForm" :rules="paramRuleFormRules" ref="paramRuleFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="参数名称" prop="params_name">
                    <el-input v-model="paramRuleForm.params_name"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="set_param_dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setParams">确 定</el-button>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                cate_value: [],
                cate_options: [],
                activeName: 'only',
                onlyTableData:[],
                manyTableData:[],
                param_dialogVisible:false,
                set_param_dialogVisible: false,
                temp_param_form:{},
                paramRuleForm:{
                    params_name: ''
                },
                paramRuleFormRules:{
                    params_name: [
                        { required: true, message: '请输入参数名称', trigger: 'blur' },
                    ],
                },
            };
        },
        created() {
            this.getParentCateList()
        },
        computed:{
          isBtnDisabled(){
              if(this.cate_value.length!==3){
                  return true
              }else{
                  return false
              }
          },
          cateId(){
              if(this.cate_value.length===3){
                  return this.cate_value[2]
              }else {
                  return null
              }
        },
        getTitle(){
            if(this.activeName==='only'){
               return '动态参数'
            }else{
               return '静态参数'
            }
        }
        },
        methods: {
            async getParentCateList() {
                const {data: res } = await this.$http.get('categories',{
                    params:{  type: 3  }
                })
                if(res.meta.status !== 200){
                    return this.$message.error('获取父级分类失败')
                }else{
                    this.cate_options = res.data;
                }
            },
            handleChange(value) {
               if(value.length!==3){
                   this.cate_value = [];
                   this.$message.warning("只能选择第三级分类")
               }else{
                   this.getParams();
               }
            },
            handleClick() {
                this.getParams();
            },
            async getParams (){
                const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`,{
                    params:{sel: this.activeName}
                })
                if(res.meta.status !== 200){
                    return this.$message.error('获取分类参数失败')
                }else{
                    console.log(res.data)
                    res.data.forEach(i =>{
                        i.attr_vals=i.attr_vals ? i.attr_vals.split(','):[]
                    })
                    if(this.activeName==='only'){
                        this.onlyTableData=res.data;
                    }else{
                        this.manyTableData=res.data;
                    }
                }
            },
            async addParams(){
                this.$refs['paramRuleFormRef'].validate(async (valid) => {
                    if(valid){
                        const {data: res} = await this.$http.post(`categories/${this.cateId}/attributes`,{
                            attr_sel: this.activeName,attr_name: this.paramRuleForm.params_name
                        })
                        if(res.meta.status !== 201){
                            return this.$message.error('创建失败')
                        }else{
                            console.log(res.data)
                            this.$message.success('创建成功')
                            this.getParams();
                            this.param_dialogVisible=false;
                            this.paramRuleForm.params_name='';
                        }
                    }else {
                        return
                    }
                })
            },
            showEditMessage(val){
                this.temp_param_form=val;
                this.paramRuleForm.params_name=val.attr_name;
                this.set_param_dialogVisible=true;
            },
            async showDeleteMessage(val){
                const {data: res} = await this.$http.delete(`categories/${this.cateId}/attributes/${val.attr_id}`)
                if(res.meta.status !== 200){
                    return this.$message.error('删除失败')
                }else{
                    this.$message.success('删除成功')
                    this.getParams();
                }
            },
            async setParams(){
                console.log(this.paramRuleForm.params_name)
                this.$refs['paramRuleFormRef'].validate(async (valid) => {
                    if(valid){
                        const {data: res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.temp_param_form.attr_id}`,{
                            attr_name: this.paramRuleForm.params_name, attr_sel: this.temp_param_form.attr_sel
                        })
                        if(res.meta.status !== 200){
                            return this.$message.error('设置失败')
                        }else{
                            this.$message.success('设置成功')
                            this.getParams();
                            this.set_param_dialogVisible=false;
                            this.paramRuleForm.params_name='';
                        }
                    }else {
                        return
                    }
                })
            }
        }
    };
</script>
<style lang="less" scoped>
.cate_table_header {
    margin-top: 15px;
    display: flex;
    align-items: center;
}
</style>